<template>
  <div>
    <a-row :gutter="[12, 7]">
      <a-col v-for="(l, i) in arr" :key="i" :sm="24" :md="12" :xl="4">
        <data-board-item :height="mainH" ref="item1" :arr="l.arr.slice(0, 10)"></data-board-item>
        <data-board-item :height="mainH" ref="item2" :hasTitle="false" :arr="l.arr.slice(10, 20)"></data-board-item>
      </a-col>
    </a-row>
    <div class="full-btn">
      <img class="img" src="/static/icon/full-btn.png" @click="fullClick" />
    </div>
  </div>
</template>

<script>
// 计算每个栏位的高度
import DataBoardItem from '@/views/dashboard/components/data-board-item.vue'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      mainH: undefined,
      arr: [
        {
          flag: 'A',
          arr: new Array(20),
        },
        {
          flag: 'B',
          arr: new Array(20),
        },
        {
          flag: 'C',
          arr: new Array(20),
        },
        {
          flag: 'D',
          arr: new Array(20),
        },
        {
          flag: 'E',
          arr: new Array(20),
        },
        {
          flag: 'F',
          arr: new Array(20),
        },
      ],
    }
  },
  components: { DataBoardItem },
  computed: {
    ...mapState({
      positionObj: (s) => s.visualized.position,
    }),
  },
  watch: {
    positionObj: {
      deep: true,
      handler(v) {
        let index = null
        this.arr.forEach((e, i) => {
          if (e.flag === v.flag) {
            index = i
          }
        })
        if (index !== null) {
          this.arr[index].arr = v.rePositionList
          this.$refs.item1[index].init()
          this.$refs.item2[index].init()
        }
      },
    },
  },
  mounted() {
    // body 添加 class
    document.body.classList.add('data-page')
    this.computedHeight()
    // setInterval(() => {
    //   console.log('this.positionObj', this.positionObj)
    // }, 1000)
    // console.log()
    // this.arr = this.randomData()
    // if (window.dataBoardInterval) {
    //   clearInterval(window.dataBoardInterval)
    // }
    // window.dataBoardInterval = setInterval(() => {
    //   this.arr = this.randomData()
    // }, 10000)
  },
  activated() {
    document.body.classList.add('data-page')
  },
  destroyed() {
    // body 删除 class
    document.body.classList.remove('data-page')
  },
  methods: {
    fullClick() {
      const name = 'data-page-full'
      if (document.body.className.indexOf(name) > -1) {
        document.body.classList.remove(name)
      } else {
        document.body.classList.add(name)
      }
      setTimeout(() => {
        this.computedHeight()
      }, 100)
    },
    computedHeight() {
      let num = 12 + 69 + 12
      if (document.body.className.indexOf('data-page-full') === -1) {
        num += 59 + 52 + 10
      }
      this.mainH = Math.floor((window.innerHeight - num) / 2)
    },
    // 随机生成 84 个库位数据
    randomData() {
      const a = () => {
        const r = Math.ceil(Math.random() * 5)
        return 'ABCDE'.substring(r - 1, r)
      }
      const b = () => {
        const r = Math.ceil(Math.random() * 9)
        return '123456789'.substring(r - 1, r)
      }
      return new Array(84).fill(0).map((e) => {
        return {
          title: `${a()}-${b()}-${b()}-${b()}`,
          num: Math.floor(Math.random() * 60),
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.full-btn {
  position: fixed;
  right: 10px;
  bottom: 22px;
  .img {
    width: 24px;
    cursor: pointer;
  }
}
</style>